<template>
    <view class="page">
        <u-navbar title="编辑资料" :back-icon-color="'#ffffff'" :title-color="'#ffffff'"
            :background="background"></u-navbar>
        <!-- 用户信息列表 -->
        <view class="user-list">
            <view class="list" style="height:160rpx;">
                <view class="title">
                    <text>头像</text>
                </view>
                <view class="more-content">
                    <!-- <image src="/static/img/user_pic.jpg" mode=""></image> -->
                    <avatar selWidth="200px" selHeight="400upx" @upload="myUpload" :avatarSrc="userInfo.avatar" avatarStyle="width: 100rpx; height: 100rpx; border-radius: 100%;">
                    </avatar>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>
            <view class="list" @click="onNickname">
                <view class="title">
                    <text>昵称</text>
                </view>
                <view class="more-content">
                    <text class="content">{{userInfo.nicename}}</text>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>
            <view class="list" @click="onName">
                <view class="title">
                    <text>姓名</text>
                </view>
                <view class="more-content">
                    <text class="content">{{userInfo.name}}</text>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>
            <view class="list">
                <view class="title">
                    <text>性别</text>
                </view>
                <view class="more-content">
                    <text class="content">{{sexText}}</text>
                    <text class="iconfont icon-more more"></text>
                </view>
                <view class="picker">
                    <picker mode="selector" @change="sexPickerChange" :value="userInfo.sex" :range="sexArray" :range-key="'dictLabel'">
                        <view class="uni-input" style="height: 100rpx;">{{sexText}}</view>
                    </picker>
                </view>
            </view>
            <view class="list">
                <view class="title">
                    <text>出生日期</text>
                </view>
                <view class="more-content">
                    <text class="content">{{userInfo.birthday}}</text>
                    <text class="iconfont icon-more more"></text>
                </view>
                <view class="picker">
                    <picker @change="birthdayPickerChange" mode="date" :value="birthdayDate" :start="startDate" :end="endDate">
                        <view class="uni-input" style="height: 100rpx;">{{birthdayDate}}</view>
                    </picker>
                </view>
            </view>
            <!-- <view class="list">
                <view class="title">
                    <text>地址</text>
                </view>
                <view :class="{'gray':!province}" @tap='showCityPicker'>{{ pathCity }} > </view>
            </view>
            <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm">
            </mpvue-city-picker> -->
            <!-- </view> -->
            <view class="list" @click="onHeight()">
                <view class="title">
                    <text>身高</text>
                </view>
                <view class="more-content">
                    <text class="content">{{userInfo.height}}cm</text>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>
            <view class="list" @click="onWeight">
                <view class="title">
                    <text>体重</text>
                </view>
                <view class="more-content">
                    <text class="content">{{userInfo.weight}}kg</text>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>

            <view class="list">
                <view class="title">
                    <text>自理能力</text>
                </view>
                <view class="more-content">
                    <text class="content"> {{abltText}} </text>
                    <text class="iconfont icon-more more"></text>
                </view>
                <view class="picker">
                    <picker @change="orgPickerChange" :value="userInfo.self_ability" :range="abilityList" :range-key="'dictLabel'">
                        <view class="uni-input" style="height: 100rpx">
                            {{abltText}}
                        </view>
                    </picker>
                </view>
            </view>

            <view style="padding:30rpx 0;">
                <view class="title0">
                    <text>简介</text>
                </view>
                <view class="content0">
                    <textarea value="" placeholder="请输入简介内容" v-model="userInfo.content" @blur="onContent"></textarea>
                    <!-- <text class="content">{{content}}</text>
                 <text class="iconfont icon-more more"></text> -->
                </view>
            </view>

        </view>
        <view class="btn-info">
            <view class="btn" @click="onSubmit()">
                <text>提交</text>
            </view>
        </view>
        <!-- 提示框 -->
        <DialogBox ref="DialogBox"></DialogBox>
        <DialogBox0 ref="DialogBox0"></DialogBox0>
        <quick-message ref="message"></quick-message>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import {
    setUserInfo,
    uploadImg
} from "@/api/setting/userInfo"
import mpvueCityPicker from '@/pagesA/components/mpvue-citypicker/mpvueCityPicker/mpvueCityPicker.vue'
import { sexArray, abilityList } from "@/api/dictionary.js"
export default {
    components: {
        mpvueCityPicker
    },
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            // 性别
            sexArray: sexArray,
            sex: 0,
            sexText: '保密',
            // 生日
            birthdayDate: currentDate,
            startDate: this.getDate('start'),
            endDate: this.getDate('end'),
            birthday: '2020-02-02',
            DialogBox: {},
            DialogBox0: {},
            // 昵称
            nicename: '',
            name: '',
            url: "../../static/img/user_pic.jpg",
            abilityList: abilityList,
            self_ability: '',
            content: '',
            height: '',
            weight: '',
            abltText: '',
            pickerValueDefault: [0, 0, 1],
            province: "", //省
            city: "", //市
            area: "", //区
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
        };
    },
    onLoad() {
        this.getUserInfo()
    },
    computed: {
        ...mapGetters(['userInfo']),
        // pathCity() {
        //     if (this.province) {
        //         return `${this.province}-${this.city}-${this.area}`
        //     } else {
        //         return '请选择';
        //     }
        // }
    },
    methods: {
        onBack() {
            uni.navigateBack();
        },
        getUserInfo() {
            this.$loading()
            this.UserInfo = uni.getStorageSync('userInfo')
            this.abltText = this.abilityList.find(item => item.dictValue == this.userInfo.self_ability) ? this.abilityList.find(item => item.dictValue == this.userInfo.self_ability).dictLabel : null
            this.sexText = this.sexArray.find(item => item.dictValue == this.userInfo.sex) ? this.sexArray.find(item => item.dictValue == this.userInfo.sex).dictLabel : null
            this.$hideLoading()
        },
        myUpload(rsp) {
            console.log(rsp, "zujian")
            this.url = rsp.path; //更新头像方式一
            this.userInfo.avatar = rsp.path;
            uploadImg(rsp.path).then((res) => {
                console.log(res.data[0].fileurl,'返回数据')
                uni.setStorageSync('avatar', res.data[0].fileurl);
                this.getUserInfo()
            })
            let params = {
                avatar: uni.getStorageSync("avatar")
            }
            setUserInfo(params).then((res) => {
                this.$store.dispatch('GetInfo')
            })
            // rsp.avatar.imgSrc = rsp.path; //更新头像方式二
        },
        // showCityPicker() {
        //     this.$refs.mpvueCityPicker.show();
        // },
        // onConfirm(e) {
        //     let arr = e.label.split("-");
        //     this.province = arr[0];
        //     this.city = arr[1];
        //     this.area = arr[2];
        //     console.log(this.form.province)
        // },
        /**
         * 性别
         * @param {Object} e
         */
        sexPickerChange(e) {
            console.log(this.userInfo, "this.userInfo")
            this.userInfo.sex = this.sexArray[e.detail.value].dictValue;
            this.sexText = this.sexArray[e.detail.value].dictLabel;
            let params = {
                sex: this.userInfo.sex
            }
            setUserInfo(params).then((res) => {
                this.$store.dispatch('GetInfo')
            })
        },
        /**
         * 生日
         * @param {Object} e
         */
        birthdayPickerChange(e) {
            this.userInfo.birthday = e.detail.value;
        },
        /**
         * 获取日期
         * @param {Object} type
         */
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 100;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
        /**
         * 昵称点击
         */
        onNickname() {
            this.$refs['DialogBox'].confirm({
                title: '更改昵称',
                placeholder: '请输入修改的昵称',
                value: this.nicename,
                DialogType: 'input',
                animation: 0
            }).then((res) => {
                this.userInfo.nicename = res.value;
                let params = {
                    nicename: this.userInfo.nicename
                }
                setUserInfo(params).then((res) => {
                    this.$store.dispatch('GetInfo')
                })
            })
        },
        onName() {
            this.$refs['DialogBox'].confirm({
                title: '更改姓名',
                placeholder: '请输入修改的姓名',
                value: this.name,
                DialogType: 'input',
                animation: 0
            }).then((res) => {
                this.userInfo.name = res.value;
                let params = {
                    name: this.userInfo.name
                }
                setUserInfo(params).then((res) => {
                    this.$store.dispatch('GetInfo')
                })
            })
        },
        onHeight() {
            this.$refs['DialogBox0'].confirm({
                title: '更改身高',
                placeholder: '请输入身高(cm，只能输数字)',
                value: this.height,
                DialogType: 'input',
                animation: 0
            }).then((res) => {
                this.userInfo.height = res.value;
                let params = {
                    height: this.userInfo.height
                }
                setUserInfo(params).then((res) => {
                    this.$store.dispatch('GetInfo')
                })
            })
        },
        onWeight() {
            this.$refs['DialogBox0'].confirm({
                title: '更改体重',
                placeholder: '请输入体重(kg，只能输数字)',
                value: this.weight,
                DialogType: 'input',
                animation: 0
            }).then((res) => {
                this.userInfo.weight = res.value;
                let params = {
                    weight: this.userInfo.weight
                }
                setUserInfo(params).then((res) => {
                    this.$store.dispatch('GetInfo')
                })
            })
        },
        onContent(e) {
            this.userInfo.content = e.detail.value;
            let params = {
                content: this.userInfo.content
            }
            setUserInfo(params).then((res) => {
                this.$store.dispatch('GetInfo')
            })

        },
        // 选择自理能力
        orgPickerChange(e) {
            this.userInfo.self_ability = this.abilityList[e.detail.value].dictValue;
            this.abltText = this.abilityList[e.detail.value].dictLabel;
            console.log(this.userInfo.self_ability, "zili");
            let params = {
                self_ability: this.userInfo.self_ability
            }
            setUserInfo(params).then((res) => {
                this.$store.dispatch('GetInfo')
            })
            // this.self_ability = this.abilityList.find(item => item.dictLabel == this.abltText) ? this.abilityList.find(item => item.dictLabel == this.abltText).id : null
        },

        showToast() {
            this.$refs.message.show({
                msg: this.toastText,
                type: "error",
            });
        },

        onSubmit() {
            let params = {
                avatar: uni.getStorageSync("avatar"),
                name: this.userInfo.name,
                nicename: this.userInfo.nicename,
                sex: this.sex,
                birthday: this.userInfo.birthday,
                height: this.userInfo.height,
                weight: this.userInfo.weight,
                self_ability: this.self_ability,
                content: this.content,
            }
            setUserInfo(params).then((res) => {
                if (res.code == 1) {
                    this.$refs.message.show({
                        msg: "保存成功",
                        type: "success"
                    })
                    setTimeout(() => {
                        uni.navigateBack({
                            url: '/pagesA/setting/setting'
                        })
                    }, 1000)
                }
            }).catch(() => { })
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
.content0 {
  padding: 30rpx 0;

  textarea {
    width: 100%;
    height: 150rpx;
    background-color: #f6f6f6;
    border-radius: 20rpx;
    padding: 20rpx;
    font-size: 26rpx;
    color: #222222;
  }
}
// .title0{
//     margin-bottom: 30rpx;
// }

/* 用户信息列表 */
.user-list {
  padding: 0 4%;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx auto;

  .list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;

    .title {
      display: flex;
      align-items: center;

      text {
        font-size: 28rpx;
        color: #222222;
      }
    }

    .more-content {
      display: flex;
      align-items: center;

      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
      }

      .content {
        font-size: 28rpx;
        color: #959595;
      }

      .more {
        font-size: 24rpx;
        color: #959595;
        margin-left: 20rpx;
      }
    }

    .picker {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
}
.gray {
  color: #999;
  max-width: 450rpx;
}
/* 按钮 */
.btn-info {
  margin-top: 130rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 80rpx;
    background: #2e996f;
    border-radius: 10rpx;
    color: #ffffff;
    font-size: 32rpx;
    // opacity: 0.4;
  }
}
</style>